<script setup>
import { onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { fileUploadAPI } from "~/api/fileUpload";
import { listByIds } from "~/api/oss";

// 全国省份城市数据
const addressData = [
  {
    name: '北京市',
    city: [
      { name: '东城区' },
      { name: '西城区' },
      { name: '朝阳区' },
      { name: '丰台区' },
      { name: '石景山区' },
      { name: '海淀区' },
      { name: '门头沟区' },
      { name: '房山区' },
      { name: '通州区' },
      { name: '顺义区' },
      { name: '昌平区' },
      { name: '大兴区' },
      { name: '怀柔区' },
      { name: '平谷区' },
      { name: '密云区' },
      { name: '延庆区' }
    ]
  },
  {
    name: '天津市',
    city: [
      { name: '和平区' },
      { name: '河东区' },
      { name: '河西区' },
      { name: '南开区' },
      { name: '河北区' },
      { name: '红桥区' },
      { name: '东丽区' },
      { name: '西青区' },
      { name: '津南区' },
      { name: '北辰区' },
      { name: '武清区' },
      { name: '宝坻区' },
      { name: '滨海新区' },
      { name: '宁河区' },
      { name: '静海区' },
      { name: '蓟州区' }
    ]
  },
  {
    name: '上海市',
    city: [
      { name: '黄浦区' },
      { name: '徐汇区' },
      { name: '长宁区' },
      { name: '静安区' },
      { name: '普陀区' },
      { name: '虹口区' },
      { name: '杨浦区' },
      { name: '闵行区' },
      { name: '宝山区' },
      { name: '嘉定区' },
      { name: '浦东新区' },
      { name: '金山区' },
      { name: '松江区' },
      { name: '青浦区' },
      { name: '奉贤区' },
      { name: '崇明区' }
    ]
  },
  {
    name: '重庆市',
    city: [
      { name: '万州区' },
      { name: '涪陵区' },
      { name: '渝中区' },
      { name: '大渡口区' },
      { name: '江北区' },
      { name: '沙坪坝区' },
      { name: '九龙坡区' },
      { name: '南岸区' },
      { name: '北碚区' },
      { name: '綦江区' },
      { name: '大足区' },
      { name: '渝北区' },
      { name: '巴南区' },
      { name: '黔江区' },
      { name: '长寿区' },
      { name: '江津区' },
      { name: '合川区' },
      { name: '永川区' },
      { name: '南川区' },
      { name: '璧山区' },
      { name: '铜梁区' },
      { name: '潼南区' },
      { name: '荣昌区' },
      { name: '开州区' },
      { name: '梁平区' },
      { name: '武隆区' }
    ]
  },
  {
    name: '河北省',
    city: [
      { name: '石家庄市' },
      { name: '唐山市' },
      { name: '秦皇岛市' },
      { name: '邯郸市' },
      { name: '邢台市' },
      { name: '保定市' },
      { name: '张家口市' },
      { name: '承德市' },
      { name: '沧州市' },
      { name: '廊坊市' },
      { name: '衡水市' }
    ]
  },
  {
    name: '山西省',
    city: [
      { name: '太原市' },
      { name: '大同市' },
      { name: '阳泉市' },
      { name: '长治市' },
      { name: '晋城市' },
      { name: '朔州市' },
      { name: '晋中市' },
      { name: '运城市' },
      { name: '忻州市' },
      { name: '临汾市' },
      { name: '吕梁市' }
    ]
  },
  {
    name: '内蒙古自治区',
    city: [
      { name: '呼和浩特市' },
      { name: '包头市' },
      { name: '乌海市' },
      { name: '赤峰市' },
      { name: '通辽市' },
      { name: '鄂尔多斯市' },
      { name: '呼伦贝尔市' },
      { name: '巴彦淖尔市' },
      { name: '乌兰察布市' },
      { name: '兴安盟' },
      { name: '锡林郭勒盟' },
      { name: '阿拉善盟' }
    ]
  },
  {
    name: '辽宁省',
    city: [
      { name: '沈阳市' },
      { name: '大连市' },
      { name: '鞍山市' },
      { name: '抚顺市' },
      { name: '本溪市' },
      { name: '丹东市' },
      { name: '锦州市' },
      { name: '营口市' },
      { name: '阜新市' },
      { name: '辽阳市' },
      { name: '盘锦市' },
      { name: '铁岭市' },
      { name: '朝阳市' },
      { name: '葫芦岛市' }
    ]
  },
  {
    name: '吉林省',
    city: [
      { name: '长春市' },
      { name: '吉林市' },
      { name: '四平市' },
      { name: '辽源市' },
      { name: '通化市' },
      { name: '白山市' },
      { name: '松原市' },
      { name: '白城市' },
      { name: '延边朝鲜族自治州' }
    ]
  },
  {
    name: '黑龙江省',
    city: [
      { name: '哈尔滨市' },
      { name: '齐齐哈尔市' },
      { name: '鸡西市' },
      { name: '鹤岗市' },
      { name: '双鸭山市' },
      { name: '大庆市' },
      { name: '伊春市' },
      { name: '佳木斯市' },
      { name: '七台河市' },
      { name: '牡丹江市' },
      { name: '黑河市' },
      { name: '绥化市' },
      { name: '大兴安岭地区' }
    ]
  },
  {
    name: '江苏省',
    city: [
      { name: '南京市' },
      { name: '无锡市' },
      { name: '徐州市' },
      { name: '常州市' },
      { name: '苏州市' },
      { name: '南通市' },
      { name: '连云港市' },
      { name: '淮安市' },
      { name: '盐城市' },
      { name: '扬州市' },
      { name: '镇江市' },
      { name: '泰州市' },
      { name: '宿迁市' }
    ]
  },
  {
    name: '浙江省',
    city: [
      { name: '杭州市' },
      { name: '宁波市' },
      { name: '温州市' },
      { name: '嘉兴市' },
      { name: '湖州市' },
      { name: '绍兴市' },
      { name: '金华市' },
      { name: '衢州市' },
      { name: '舟山市' },
      { name: '台州市' },
      { name: '丽水市' }
    ]
  },
  {
    name: '安徽省',
    city: [
      { name: '合肥市' },
      { name: '芜湖市' },
      { name: '蚌埠市' },
      { name: '淮南市' },
      { name: '马鞍山市' },
      { name: '淮北市' },
      { name: '铜陵市' },
      { name: '安庆市' },
      { name: '黄山市' },
      { name: '滁州市' },
      { name: '阜阳市' },
      { name: '宿州市' },
      { name: '六安市' },
      { name: '亳州市' },
      { name: '池州市' },
      { name: '宣城市' }
    ]
  },
  {
    name: '福建省',
    city: [
      { name: '福州市' },
      { name: '厦门市' },
      { name: '莆田市' },
      { name: '三明市' },
      { name: '泉州市' },
      { name: '漳州市' },
      { name: '南平市' },
      { name: '龙岩市' },
      { name: '宁德市' }
    ]
  },
  {
    name: '江西省',
    city: [
      { name: '南昌市' },
      { name: '景德镇市' },
      { name: '萍乡市' },
      { name: '九江市' },
      { name: '新余市' },
      { name: '鹰潭市' },
      { name: '赣州市' },
      { name: '吉安市' },
      { name: '宜春市' },
      { name: '抚州市' },
      { name: '上饶市' }
    ]
  },
  {
    name: '山东省',
    city: [
      { name: '济南市' },
      { name: '青岛市' },
      { name: '淄博市' },
      { name: '枣庄市' },
      { name: '东营市' },
      { name: '烟台市' },
      { name: '潍坊市' },
      { name: '济宁市' },
      { name: '泰安市' },
      { name: '威海市' },
      { name: '日照市' },
      { name: '临沂市' },
      { name: '德州市' },
      { name: '聊城市' },
      { name: '滨州市' },
      { name: '菏泽市' }
    ]
  },
  {
    name: '河南省',
    city: [
      { name: '郑州市' },
      { name: '开封市' },
      { name: '洛阳市' },
      { name: '平顶山市' },
      { name: '安阳市' },
      { name: '鹤壁市' },
      { name: '新乡市' },
      { name: '焦作市' },
      { name: '濮阳市' },
      { name: '许昌市' },
      { name: '漯河市' },
      { name: '三门峡市' },
      { name: '南阳市' },
      { name: '商丘市' },
      { name: '信阳市' },
      { name: '周口市' },
      { name: '驻马店市' },
      { name: '济源市' }
    ]
  },
  {
    name: '湖北省',
    city: [
      { name: '武汉市' },
      { name: '黄石市' },
      { name: '十堰市' },
      { name: '宜昌市' },
      { name: '襄阳市' },
      { name: '鄂州市' },
      { name: '荆门市' },
      { name: '孝感市' },
      { name: '荆州市' },
      { name: '黄冈市' },
      { name: '咸宁市' },
      { name: '随州市' },
      { name: '恩施土家族苗族自治州' },
      { name: '仙桃市' },
      { name: '潜江市' },
      { name: '天门市' },
      { name: '神农架林区' }
    ]
  },
  {
    name: '湖南省',
    city: [
      { name: '长沙市' },
      { name: '株洲市' },
      { name: '湘潭市' },
      { name: '衡阳市' },
      { name: '邵阳市' },
      { name: '岳阳市' },
      { name: '常德市' },
      { name: '张家界市' },
      { name: '益阳市' },
      { name: '郴州市' },
      { name: '永州市' },
      { name: '怀化市' },
      { name: '娄底市' },
      { name: '湘西土家族苗族自治州' }
    ]
  },
  {
    name: '广东省',
    city: [
      { name: '广州市' },
      { name: '韶关市' },
      { name: '深圳市' },
      { name: '珠海市' },
      { name: '汕头市' },
      { name: '佛山市' },
      { name: '江门市' },
      { name: '湛江市' },
      { name: '茂名市' },
      { name: '肇庆市' },
      { name: '惠州市' },
      { name: '梅州市' },
      { name: '汕尾市' },
      { name: '河源市' },
      { name: '阳江市' },
      { name: '清远市' },
      { name: '东莞市' },
      { name: '中山市' },
      { name: '潮州市' },
      { name: '揭阳市' },
      { name: '云浮市' }
    ]
  },
  {
    name: '广西壮族自治区',
    city: [
      { name: '南宁市' },
      { name: '柳州市' },
      { name: '桂林市' },
      { name: '梧州市' },
      { name: '北海市' },
      { name: '防城港市' },
      { name: '钦州市' },
      { name: '贵港市' },
      { name: '玉林市' },
      { name: '百色市' },
      { name: '贺州市' },
      { name: '河池市' },
      { name: '来宾市' },
      { name: '崇左市' }
    ]
  },
  {
    name: '海南省',
    city: [
      { name: '海口市' },
      { name: '三亚市' },
      { name: '三沙市' },
      { name: '儋州市' },
      { name: '五指山市' },
      { name: '琼海市' },
      { name: '文昌市' },
      { name: '万宁市' },
      { name: '东方市' },
      { name: '定安县' },
      { name: '屯昌县' },
      { name: '澄迈县' },
      { name: '临高县' },
      { name: '白沙黎族自治县' },
      { name: '昌江黎族自治县' },
      { name: '乐东黎族自治县' },
      { name: '陵水黎族自治县' },
      { name: '保亭黎族苗族自治县' },
      { name: '琼中黎族苗族自治县' }
    ]
  },
  {
    name: '四川省',
    city: [
      { name: '成都市' },
      { name: '自贡市' },
      { name: '攀枝花市' },
      { name: '泸州市' },
      { name: '德阳市' },
      { name: '绵阳市' },
      { name: '广元市' },
      { name: '遂宁市' },
      { name: '内江市' },
      { name: '乐山市' },
      { name: '南充市' },
      { name: '眉山市' },
      { name: '宜宾市' },
      { name: '广安市' },
      { name: '达州市' },
      { name: '雅安市' },
      { name: '巴中市' },
      { name: '资阳市' },
      { name: '阿坝藏族羌族自治州' },
      { name: '甘孜藏族自治州' },
      { name: '凉山彝族自治州' }
    ]
  },
  {
    name: '贵州省',
    city: [
      { name: '贵阳市' },
      { name: '六盘水市' },
      { name: '遵义市' },
      { name: '安顺市' },
      { name: '毕节市' },
      { name: '铜仁市' },
      { name: '黔西南布依族苗族自治州' },
      { name: '黔东南苗族侗族自治州' },
      { name: '黔南布依族苗族自治州' }
    ]
  },
  {
    name: '云南省',
    city: [
      { name: '昆明市' },
      { name: '曲靖市' },
      { name: '玉溪市' },
      { name: '保山市' },
      { name: '昭通市' },
      { name: '丽江市' },
      { name: '普洱市' },
      { name: '临沧市' },
      { name: '楚雄彝族自治州' },
      { name: '红河哈尼族彝族自治州' },
      { name: '文山壮族苗族自治州' },
      { name: '西双版纳傣族自治州' },
      { name: '大理白族自治州' },
      { name: '德宏傣族景颇族自治州' },
      { name: '怒江傈僳族自治州' },
      { name: '迪庆藏族自治州' }
    ]
  },
  {
    name: '西藏自治区',
    city: [
      { name: '拉萨市' },
      { name: '日喀则市' },
      { name: '昌都市' },
      { name: '林芝市' },
      { name: '山南市' },
      { name: '那曲市' },
      { name: '阿里地区' }
    ]
  },
  {
    name: '陕西省',
    city: [
      { name: '西安市' },
      { name: '铜川市' },
      { name: '宝鸡市' },
      { name: '咸阳市' },
      { name: '渭南市' },
      { name: '延安市' },
      { name: '汉中市' },
      { name: '榆林市' },
      { name: '安康市' },
      { name: '商洛市' }
    ]
  },
  {
    name: '甘肃省',
    city: [
      { name: '兰州市' },
      { name: '嘉峪关市' },
      { name: '金昌市' },
      { name: '白银市' },
      { name: '天水市' },
      { name: '武威市' },
      { name: '张掖市' },
      { name: '平凉市' },
      { name: '酒泉市' },
      { name: '庆阳市' },
      { name: '定西市' },
      { name: '陇南市' },
      { name: '临夏回族自治州' },
      { name: '甘南藏族自治州' }
    ]
  },
  {
    name: '青海省',
    city: [
      { name: '西宁市' },
      { name: '海东市' },
      { name: '海北藏族自治州' },
      { name: '黄南藏族自治州' },
      { name: '海南藏族自治州' },
      { name: '果洛藏族自治州' },
      { name: '玉树藏族自治州' },
      { name: '海西蒙古族藏族自治州' }
    ]
  },
  {
    name: '宁夏回族自治区',
    city: [
      { name: '银川市' },
      { name: '石嘴山市' },
      { name: '吴忠市' },
      { name: '固原市' },
      { name: '中卫市' }
    ]
  },
  {
    name: '新疆维吾尔自治区',
    city: [
      { name: '乌鲁木齐市' },
      { name: '克拉玛依市' },
      { name: '吐鲁番市' },
      { name: '哈密市' },
      { name: '昌吉回族自治州' },
      { name: '博尔塔拉蒙古自治州' },
      { name: '巴音郭楞蒙古自治州' },
      { name: '阿克苏地区' },
      { name: '克孜勒苏柯尔克孜自治州' },
      { name: '喀什地区' },
      { name: '和田地区' },
      { name: '伊犁哈萨克自治州' },
      { name: '塔城地区' },
      { name: '阿勒泰地区' },
      { name: '石河子市' },
      { name: '阿拉尔市' },
      { name: '图木舒克市' },
      { name: '五家渠市' },
      { name: '北屯市' },
      { name: '铁门关市' },
      { name: '双河市' },
      { name: '可克达拉市' },
      { name: '昆玉市' },
      { name: '胡杨河市' }
    ]
  },
  {
    name: '香港特别行政区',
    city: [
      { name: '中西区' },
      { name: '湾仔区' },
      { name: '东区' },
      { name: '南区' },
      { name: '油尖旺区' },
      { name: '深水埗区' },
      { name: '九龙城区' },
      { name: '黄大仙区' },
      { name: '观塘区' },
      { name: '荃湾区' },
      { name: '屯门区' },
      { name: '元朗区' },
      { name: '北区' },
      { name: '大埔区' },
      { name: '沙田区' },
      { name: '西贡区' },
      { name: '葵青区' },
      { name: '离岛区' }
    ]
  },
  {
    name: '澳门特别行政区',
    city: [
      { name: '澳门半岛' },
      { name: '氹仔' },
      { name: '路环' }
    ]
  },
  {
    name: '台湾省',
    city: [
      { name: '台北市' },
      { name: '高雄市' },
      { name: '基隆市' },
      { name: '台中市' },
      { name: '台南市' },
      { name: '新竹市' },
      { name: '嘉义市' },
      { name: '新北市' },
      { name: '宜兰县' },
      { name: '桃园市' },
      { name: '新竹县' },
      { name: '苗栗县' },
      { name: '彰化县' },
      { name: '南投县' },
      { name: '云林县' },
      { name: '嘉义县' },
      { name: '屏东县' },
      { name: '台东县' },
      { name: '花莲县' },
      { name: '澎湖县' },
      { name: '金门县' },
      { name: '连江县' }
    ]
  }
];

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

watch(
  () => props.info,
  async (newVal) => {
    // 处理头像：判断是 URL 还是 ossId
    if (props.info.avatar) {
      if (props.info.avatar.includes('http')) {
        // 如果是完整 URL，直接使用
        avatarUrl.value = props.info.avatar;
      } else {
        // 如果是 ossId，转换为 URL 显示
        formData.value.avatar = props.info.avatar;
        try {
          const ossRes = await listByIds(props.info.avatar);
          if (ossRes.data && ossRes.data.length > 0) {
            avatarUrl.value = ossRes.data[0].url;
          }
        } catch (err) {
          console.error('初始化时获取头像URL失败:', err);
        }
      }
    }
    
    // 处理昵称
    if (props.info.nickName) {
      formData.value.nickName = props.info.nickName;
    }
    
    // 处理地址数据
    // props.info.address 已经在 EditUser.vue 中处理成数组了
    if (props.info.address) {
      if (Array.isArray(props.info.address)) {
        formData.value.address = props.info.address;
      } else if (typeof props.info.address === 'string') {
        // 兼容旧数据格式（如果还有字符串格式）
        formData.value.address = props.info.address.split(",");
      }
    }
    
    // 处理详细地址
    if (props.info.addressDetails) {
      formData.value.addressDetails = props.info.addressDetails;
    }
  },
  { immediate: true, deep: true }
);

const router = useRouter();

const formData = ref({
  avatar: "",  // 存储 ossId（用于提交）
  nickName: "",
  address: [],  // 地区选择器数组
  addressDetails: "",  // 详细地址
});
const avatarUrl = ref("");  // 存储图片 URL（用于显示）
const avatarUploading = ref(false);

// 使用自定义上传方法，统一调用 fileUploadAPI
const customUpload = async (options) => {
  const { file } = options;
  avatarUploading.value = true;
  
  try {
    const uploadFormData = new FormData();
    uploadFormData.append("file", file);
    
    const res = await fileUploadAPI(uploadFormData);
    
    if (res.code === 200 && res.data) {
      const ossId = res.data.ossId;
      let url = res.data.url;
      
      // 如果没有 url，使用 ossId 获取
      if (!url && ossId) {
        try {
          const ossRes = await listByIds(ossId);
          if (ossRes.data && ossRes.data.length > 0) {
            url = ossRes.data[0].url;
          }
        } catch (err) {
          console.error('获取头像URL失败:', err);
          ElMessage.error('获取头像URL失败');
          return;
        }
      }
      
      if (url && ossId) {
        // formData.avatar 存储 ossId（用于提交）
        formData.value.avatar = ossId;
        // avatarUrl 存储 URL（用于显示）
        avatarUrl.value = url;
        ElMessage.success('上传成功');
      } else {
        ElMessage.error('未获取到头像地址');
      }
    } else {
      ElMessage.error(res.msg || '上传失败');
      if (res.code === 401) {
        router.push("/login");
      }
    }
  } catch (error) {
    console.error('上传失败:', error);
    ElMessage.error('上传失败，请重试');
  } finally {
    avatarUploading.value = false;
  }
};

const rules = {
  nickName: [
    { required: true, message: "请输入昵称", trigger: "blur" },
  ],
  address: [{ required: true, message: "请选择常住地", trigger: "change" }],
  addressDetails: [
    { required: true, message: "请输入详细地址", trigger: "blur" },
  ],
  avatar: [{ required: true, message: "请上传头像", trigger: "change" }],
};

const ruleFormRef = ref();
const checkForm = async () => {
  try {
    await ruleFormRef.value.validate();
    return Promise.resolve();
  } catch (e) {
    return Promise.reject();
  }
};

// 暴露给父组件的数据和方法
defineExpose({
  get formData() {
    return formData.value;
  },
  checkForm,
});
</script>

<template>
  <div class="main-info">
    <h4 class="title"><span></span> 个人信息</h4>
    <div class="form">
      <el-form
        ref="ruleFormRef"
        :model="formData"
        label-position="top"
        :rules="rules"
      >
        <el-form-item required prop="avatar">
          <template #label>
            <p class="label">
              头像 <span>请上传真实得体的头像 （照片大小不超过10MB）</span>
            </p>
          </template>
          <el-upload
            v-loading="avatarUploading"
            background="rgba(0,0,0,.2)"
            class="avatar-uploader"
            :http-request="customUpload"
            :show-file-list="false"
            accept="image/png,image/jpeg,image/jpg"
          >
            
            <div
              class="upload-tips"
              :class="{ 'change-active': avatarUrl }"
            >
              <img 
                v-if="avatarUrl" 
                :src="avatarUrl" 
                class="avatar"
              />
              <img
                v-else
                v-if="!avatarUrl"
                src="~/assets/file-icon.jpg"
                alt=""
              />
              <div class="upload-tips-content" v-if="avatarUrl">
                <img
                  src="~/assets/file-icon.jpg"
                  alt=""
                />
                <p>{{ avatarUrl ? "替换头像" : "上传头像" }}</p>
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称" required prop="nickName">
          <el-input
            v-model="formData.nickName"
            placeholder="请输入昵称"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="常住地" required prop="address">
          <el-cascader
            v-model="formData.address"
            style="width: 100%"
            :options="addressData"
            placeholder="选择地址"
            :props="{ value: 'name', label: 'name', children: 'city' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item
          v-if="formData.address"
          label=""
          required
          prop="addressDetails"
        >
          <el-input
            v-model="formData.addressDetails"
            placeholder="请输入详细地址"
            style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main-info {
  width: 1200px;
  margin: 32px auto 20px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  box-sizing: border-box;
  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
    span {
      width: 2px;
      height: 12px;
      background: #1dbf73;
      border-radius: 10px 10px 10px 10px;
      margin-right: 6px;
    }
  }
}
.avatar-uploader {
  width: 88px;
  height: 88px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.form {
  width: 650px;
}
.label {
  span {
    font-size: 12px;
    color: rgba(25, 30, 40, 0.36);
    margin-left: 8px;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader .upload-tips {
  font-size: 28px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  text-align: center;
  border-radius: 44px 44px 44px 44px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  &.change-active {
    P {
      color: #fff;
    }
  }
  img {
    width: 24px;
    height: 24px;
  }
  p {
    color: rgba(25, 30, 40, 0.24);
    font-size: 12px;
  }

  .avatar {
    width: 88px;
    height: 88px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 44px;
    
  }
  &:hover{
     .upload-tips-content{
        display: flex;
      }
    }
  .upload-tips-content{
      background: rgba(25, 30, 40, 0.34);
      width: 84px;
      height: 84px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      display:none;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
    }
}

</style>

<style>
.el-form-item--label-top .el-form-item__label p {
  display: inline;
}
</style>
